/* ==========================================================================
   Atlas layout

   Extra styling for responsive layouts
========================================================================== */
$sidebar-width: 232px;
$sidebar-icon-height: 52px;
$sidebar-icon-width: 52px;

.layout-atlas-responsive,
.layout-atlas-responsive-default {
    $sidebar-width: 232px;

    @media (min-width: $screen-md) {
        .mx-scrollcontainer-shrink:not(.mx-scrollcontainer-open) > .region-sidebar,
        .mx-scrollcontainer-push:not(.mx-scrollcontainer-open) > .region-sidebar,
        .mx-scrollcontainer-slide:not(.mx-scrollcontainer-open) > .region-sidebar {
            width: $sidebar-width !important;

            .mx-scrollcontainer-wrapper > .mx-navigationtree ul li {
                &.mx-navigationtree-has-items:hover {
                    ul {
                        position: absolute;
                        z-index: 100;
                        top: 0;
                        bottom: 0;
                        left: $sidebar-icon-width;
                        display: block;
                        overflow-y: auto;
                        min-width: auto;
                        padding: $spacing-small 0;
                    }
                }

                &.mx-navigationtree-collapsed,
                &.mx-navigationtree-has-items {
                    ul {
                        display: none;
                    }
                }
            }
        }
    }

    .mx-scrollcontainer-slide {
        &:not(.mx-scrollcontainer-open) > .region-sidebar {
            overflow: hidden;
        }

        &.mx-scrollcontainer-open > .region-sidebar {
            width: $sidebar-width !important;

            & > .mx-scrollcontainer-wrapper {
                position: relative;
            }
        }

        .region-sidebar > .mx-scrollcontainer-wrapper {
            z-index: 2;
            left: 0 !important;
            background-color: inherit;
        }
    }

    // Push aside for mobile
    @media (max-width: $screen-sm-max) {
        .mx-scrollcontainer-open:not(.mx-scrollcontainer-slide) {
            width: 1100px;
        }

        .mx-scrollcontainer-slide .toggle-btn {
            display: inline-block !important;
        }
    }

    // Sidebar
    .region-sidebar {
        .toggle-btn {
            width: $sidebar-icon-width;
            border-color: transparent;
            border-radius: 0;
            background: transparent;
        }

        .mx-scrollcontainer-wrapper {
            .toggle-btn-wrapper {
                display: flex;
                padding: $spacing-small;
                align-items: center;
                min-height: $topbar-minimalheight + 4px;
                background: $navsidebar-sub-bg;
            }
            .toggle-btn {
                padding: $spacing-medium;

                img {
                    width: 24px;
                    height: 24px;
                }
            }
            .toggle-text {
                color: #fff;
                font-weight: bold;
            }
            & > .mx-navigationtree .navbar-inner > ul > li {
                & > a {
                    height: $sidebar-icon-height;
                    padding: $spacing-small 0;
                    white-space: nowrap;
                    overflow: hidden;
                    // Glyph icon
                    .glyphicon {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: $sidebar-icon-width;
                        height: $sidebar-icon-height;
                        padding: $spacing-small $spacing-medium;
                        border-radius: $border-radius-default;
                    }
                }
            }
        }
    }

    // Topbar
    .region-topbar {
        padding: 0 $spacing-small;
    }
}

// Topbar variant
.layout-atlas-responsive-topbar {
    .region-topbar {
        padding: 0 $spacing-medium;
        @media (max-width: $screen-sm-max) {
            padding: 0 $spacing-small;
        }
    }
}

// All responsive layouts
.layout-atlas-responsive,
.layout-atlas-responsive-default,
.layout-atlas-responsive-topbar {
    // Topbar
    .region-topbar {
        .toggle-btn {
            display: none;

            @media (max-width: $screen-sm-max) {
                display: inline-block;
            }
        }
    }
}

// Fix Safari issue of sidebar disappearing
.profile-tablet {
    .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar {
        overflow-y: hidden;

        .mx-scrollcontainer-wrapper {
            overflow: visible;
        }
    }
}
